<template>
	<view>
		<view class="uni-container">
			<uni-swipe-action v-for="(item, index) in tableData" :key="index">
				<!-- 基础用法 -->
				<uni-swipe-action-item :right-options="options" @click="onClick($event,index,item.degreeid)"
					>
					<view class="list-item">
						<view class="content-box">{{ item.buildingname }}{{ item.dormitorycode }}</view>
						<view class="content-box" style="width: 150px;">{{ item.checkdate }}</view>
						<view class="content-box">{{ item.numberdegrees }}</view>
						<view class="content-box">{{ item.difference }}</view>
					</view>
				</uni-swipe-action-item>

			</uni-swipe-action>
			<!-- 			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="50" align="center">房间</uni-th>
					<uni-th width="100" align="center">最近日期</uni-th>
					<uni-th width="100" align="center">抄表数</uni-th>
					<uni-th width="100" align="center">使用数</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.buildingname }}{{ item.dormitorycode }}</uni-td>
					<uni-td align="center">{{ item.checkdate }}</uni-td>
					<uni-td align="center">{{ item.numberdegrees }}</uni-td>
					<uni-td align="center">{{ item.difference }}</uni-td>
				</uni-tr>
			</uni-table> -->
			<view class="uni-pagination-box">
				<uni-pagination page-size="1" total="9" title="标题文字" prev-text="前一栋" next-text="后一栋"
					@change="pagechange" />
			</view>

			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="修改度数" :value="from.numberdegrees"
						@confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>s

<script>
	import {
		getDegrees,
		updateDegrees
	} from '@/api/degrees.js'
	import {
		getHisList,
		removedegrees
	} from '@/api/index.js'
	export default {
		data() {
			return {
				tableData: [],
				loading: false,
				options: [{
					text: '修改',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				from: {
					id: '',
					numberdegrees: 0
				},
				page:1
			}
		},
		created() {
			this.getData("1")
		},
		methods: {
			// 分页触发
			pagechange(e) {
				//this.$refs.table.clearSelection()
				this.page=e.current;
				this.getData(e.current)
			},
			onClick(e, index, id) {
				//console.log('当前状态：' + e.content.text + '，下标：' + index + '，id：' + id)
				if (id == null) {
					this.$modal.msg("无数据")
					return
				}
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								removedegrees(id).then(response => {
									this.getData(this.page)
									this.$modal.msgSuccess("删除成功")
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					getDegrees(id).then(response => {
						//console.log(response.data)
						if (response.code == 200) {
							this.from = response.data;
							this.$refs.inputDialog.open()
						} else {
							this.$modal.msgWarning("无数据")
						}
					});

				}
			},
			swipeChange(e, id) {
				//  console.log('当前状态：'+ e +'，下标：' + id)

			},
			// 获取数据
			getData(b) {
				getHisList(b).then(response => {
					this.tableData = response;
				});
			},
			dialogInputConfirm(val) {
				//console.log(val)
				this.from.numberdegrees=val;
				updateDegrees(this.from).then(response => {
					this.getData(this.page)
					this.$modal.msgSuccess("修改成功")
				});
			}
		}
	}
</script>

<style>
	.uni-group {
		display: flex;
		align-items: center;
	}

	.list-item {
		display: flex;
		align-items: center;

	}

	.content-box {
		flex: 1;
		height: 44px;
		line-height: 44px;

		text-align: center;
		background-color: #fff;
		border: 1px solid #f5f5f5;
	}
</style>